<template>
    <div>
        <div class="gva-table-box">
            <div class="role">
                <LTable :columns="columns" :tableData="tableData" :pages="pages"
                    @updateMultipleSelection="handleSelectionChange" @changePages="changePages" :typeItem="'projectColumns'"
                    :maxHeight="'calc(100vh - 226px)'" :searchArr="searchArr" :isSearch="true" @onSubmit="onSubmit"
                    @rowDblclick="(v) => {
                            getDetails(v, 'v');
                        }
                        ">
                    <template #CreatedAt="{ row }">
                        {{ formatDate(row.CreatedAt) }}
                    </template>
                    <template #UpdatedAt="{ row }">
                        {{ formatDate(row.UpdatedAt) }}
                    </template>
                    <template #action>
                        <div class="gva-btn-list">
                            <el-button type="primary" icon="plus" @click="openCreateAndEdit">新增</el-button>
                            <!-- <el-button
                                icon="delete"
                                style="margin-left: 10px"
                                :disabled="!multipleSelection.length"
                                @click="onDelete"
                                >删除</el-button
                            > -->
                            <el-button :disabled="multipleSelection.length != 1" type="primary" icon="edit"
                                class="table-button" @click="getDetails(multipleSelection.length == 1 && multipleSelection[0])">
                                编辑
                            </el-button>
                            <el-button :disabled="multipleSelection.length != 1" type="primary" icon="edit"
                                class="table-button" @click="styleNumSearchShowChange">
                                所用款式
                            </el-button>
                        </div>
                    </template>
                </LTable>
            </div>
        </div>
        <styleNumSearch v-if="styleNumSearchShow" @closeDialog="closeDialog"
            :selectData="multipleSelection[0].accessoryNum"></styleNumSearch>

    </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";

import {
    deleteAccessoryNumberDocument,
    deleteAccessoryNumberDocumentByIds,
    getAccessoryNumberDocumentList,
} from "@/api/confAccessoryNumberDocument";

// 全量引入格式化工具 请按需保留
import { getDictFunc, formatDate } from "@/utils/format";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, computed, watch } from "vue";
// 引入组件
import LTable from "@/components/LTable/LTable.vue";
// import searchForm from "@/components/searchForm/searchForm.vue";
import { useI18n } from "vue-i18n";
import styleNumSearch from "./styleNumSearch.vue";
const { t: il8n } = useI18n();

defineOptions({
    name: "SbuProjects",
});

// 使用 useRoute 函数获取当前路由信息
const route = useRoute();
const router = useRouter();

// 自动化生成的字典（可能为空）以及字段
const sbuTypesOptions = ref([]);

// 验证规则
const rule = reactive({});

const elSearchFormRef = ref();

// =========== 表格控制部分 ===========
const tableData = ref([]);
const pages = ref({
    page: 1,
    pageSize: 20,
    total: 0,
});
const searchInfo = ref({});

const createStyleDialogShow = ref(false); // 创建款式弹窗
const createStyleDialogShowLoading = ref(false); // 创建款式弹窗
const createStyleNum = ref(1); // 创建款式数量
const currentItem = ref({}); // 当前点击节点
const styleNumSearchShow = ref(false)
// ======表格头部数据======
const columns = ref([
    {
        prop: "accessoryNum1",
        label: "配件编号",
        fixedWidth: 140,
        show: true,
        filter: true,
        tableColumnProps: {
            fixed: "left",
        },
    },
    {
        prop: "accessoryNum",
        label: "配件编号1",
        show: true, // 通过 show 来控制列的展示或隐藏
        filter: true,
        fixedWidth: 140,

    },
    {
        prop: "colorNum",
        label: "配件编号2",
        filter: true,
        show: true,
        fixedWidth: 90,
    },
    // {
    //     prop: "accessoryNum2",
    //     label: "配件编号2",
    //     fixedWidth: 86,
    //     show: true,
    //     filter: true,
    // },
    {
        prop: "materialDesc",
        label: "物料说明",
        fixedWidth: 120,
        show: true,
        filter: true,
    },
    {
        prop: "unit",
        label: "单位",
        fixedWidth: 100,
        show: true,
        filter: true,
    },
    {
        prop: "materialGroup",
        label: "物料群组",
        fixedWidth: 120,
        show: true,
        filter: true,
    },
    {
        prop: "materialGroupDesc",
        label: "物料群组说明",
        fixedWidth: 150,
        show: true,
        filter: true,
    },
    {
        prop: "materialProperty",
        label: "材质属性",
        fixedWidth: 120,
        show: true,
        filter: true,
    },
    {
        prop: "workingProcedure",
        label: "工序",
        fixedWidth: 120,
        show: true,
        filter: true,
    },
    {
        prop: "usageStatus",
        fixedWidth: 120,
        label: "使用状态",
        show: true,
        filter: true,
    },
    {
        prop: "isMoldAvailable",
        label: "是否有模具",
        fixedWidth: 140,
        show: true,
        filter: true,
    },
    {
        prop: "styleNum",
        label: "款式编号",
        fixedWidth: 120,
        show: true,
        filter: true,
    },
    // {
    //     prop: "colorNum",
    //     label: "颜色编号",
    //     filter: true,
    //     show: true,
    //     selectList: [],
    //     fixedWidth: 120,
    // },

    // {
    //     prop: "brandName",
    //     fixedWidth: 100,
    //     label: "品牌",
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "isSpleenMetalShare",
    //     label: "是否辨别金胶共用",
    //     fixedWidth: 100,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "firstCreateAt",
    //     label: "(首办)创建日期",
    //     fixedWidth: 100,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "moldStartedType",
    //     label: "已起模配架类型",
    //     fixedWidth: 100,
    //     show: true,
    //     filter: true,
    // },

    // {
    //     prop: "materialSize",
    //     label: "物料尺码",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "accessoryName",
    //     label: "配件名称",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },


    // {
    //     prop: "firstOrLarge",
    //     label: "首办/大办",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "moldStatus",
    //     label: "模具状态",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "drawingNum",
    //     label: "图纸编号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "isOutSource",
    //     label: "是否外发",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "outSourceNeed",
    //     label: "外发需求",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "firstOrderNumBelongTo",
    //     label: "首办所属款号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "largeScaleNumBelongTo",
    //     label: "大办所属款号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "firstOrderAccessoryNum",
    //     label: "(首办)配件编号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "firstOrderShareDocumentAccessoryNum",
    //     label: "(首办)共用主档配件编号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },
    // {
    //     prop: "firstOrderDrawingNum",
    //     label: "(首办)图纸编号",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    // },

    // {
    //     prop: "CreatedAt",
    //     label: "创建时间",
    //     fixedWidth: 120,
    //     show: true,
    //     filter: true,
    //     isSearch:true,
    // },
]);
// ======查询数据======
const searchArr = ref([
    {
        prop: "accessoryNum",
        label: "配件编号",
        show: true, // 通过 show 来控制列的展示或隐藏
        filter: true,
        isSearch: true,
        tableColumnProps: {
            fixed: "left",
        },
        value: "",
        type: "input",
    },
    {
        prop: "colorNum",
        label: "颜色编号",
        filter: true,
        show: true,
        value: "",
        type: "input",

    },
    {
        prop: "usageStatus",
        label: "使用状态",
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "brandName",
        fixedWidth: 120,
        label: "品牌",
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "materialDesc",
        label: "物料说明",
        fixedWidth: 120,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "unit",
        label: "单位",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },

    {
        prop: "materialGroupDesc",
        label: "物料群组说明",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "isMoldAvailable",
        label: "是否有模具",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "styleNum",
        label: "款式编号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "isSpleenMetalShare",
        label: "是否辨别金胶共用",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input",
    },
    {
        prop: "firstCreateAt",
        label: "(首办)创建日期",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "datetimerange",
    },
    {
        prop: "moldStartedType",
        label: "已起模配架类型",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "materialGroup",
        label: "物料群组",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "materialSize",
        label: "物料尺码",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "accessoryName",
        label: "配件名称",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "materialProperty",
        label: "材质属性",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "workingProcedure",
        label: "工序",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "firstOrLarge",
        label: "首办/大办",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "moldStatus",
        label: "模具状态",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "drawingNum",
        label: "图纸编号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "isOutSource",
        label: "是否外发",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "outSourceNeed",
        label: "外发需求",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "firstOrderNumBelongTo",
        label: "首办所属款号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "largeScaleNumBelongTo",
        label: "大办所属款号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "firstOrderAccessoryNum",
        label: "(首办)配件编号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "firstOrderShareDocumentAccessoryNum",
        label: "(首办)共用主档配件编号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "firstOrderDrawingNum",
        label: "(首办)图纸编号",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "accessoryNum1",
        label: "配件编号1",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "accessoryNum2",
        label: "配件编号2",
        fixedWidth: 100,
        show: true,
        filter: true,
        value: "",
        type: "input"
    },
    {
        prop: "CreatedAt",
        label: "创建时间",
        fixedWidth: 120,
        show: true,
        filter: true,
        value: "",
        type: "datetimerange",
    },
]);

// 重置
const onReset = () => {
    searchInfo.value = {};
    getTableData();
};

// 搜索
const onSubmit = (val) => {
    searchInfo.value = {
        ...val,
    };
    // if (searchInfo.value.CreatedAt) {
    //     searchInfo.value["startCreatedAt"] =
    //         searchInfo.value.CreatedAt[0] || "";
    //     searchInfo.value["endCreatedAt"] = searchInfo.value.CreatedAt[1] || "";
    // }
    // if (searchInfo.value.UpdatedAt) {
    //     searchInfo.value["startUpdatedAt"] =
    //         searchInfo.value.UpdatedAt[0] || "";
    //     searchInfo.value["endUpdatedAt"] = searchInfo.value.UpdatedAt[1] || "";
    // }
    pages.value.page = 1;
    pages.value.pageSize = 20;
    getTableData();
};

// 改变页码
const changePages = (currentPages) => {
    pages.value = {
        ...pages.value,
        ...currentPages,
    };
    getTableData();
};

// 查询
const getTableData = async () => {
    const table = await getAccessoryNumberDocumentList({
        page: pages.value.page,
        pageSize: pages.value.pageSize,
        ...searchInfo.value,
    });
    if (table.code === 0) {
        tableData.value = table.data.list.map((item) => {
            item.CreatedAt = item.CreatedAt ? formatDate(item.CreatedAt) : "";
            item.firstCreateAt = item.firstCreateAt ? formatDate(item.firstCreateAt) : "";
            return item;
        });
        pages.value.total = table.data.total;
        pages.value.page = table.data.page;
        pages.value.pageSize = table.data.pageSize;
    }
};

// getTableData();

// ============== 表格控制部分结束 ===============

// 获取需要的字典 可能为空 按需保留
const setOptions = async () => {
    sbuTypesOptions.value = await getDictFunc("sbuTypes");
};

// 获取需要的字典 可能为空 按需保留
setOptions();

// 多选数据
const multipleSelection = ref([]);
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val;
};

// 删除行
const deleteRow = (row) => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        deleteAccessoryNumberDocumentFunc(row);
    });
};

// 多选删除
const onDelete = async () => {
    ElMessageBox.confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(async () => {
        const IDs = [];
        if (multipleSelection.value.length === 0) {
            ElMessage({
                type: "warning",
                message: "请选择要删除的数据",
            });
            return;
        }
        multipleSelection.value &&
            multipleSelection.value.map((item) => {
                IDs.push(item.ID);
            });
        const res = await deleteAccessoryNumberDocumentByIds({ IDs });
        if (res.code === 0) {
            ElMessage({
                type: "success",
                message: "删除成功",
            });
            if (tableData.value.length === IDs.length && pages.value.page > 1) {
                pages.value.page--;
            }
            getTableData();
        }
    });
};

// 行为控制标记（弹窗内部需要增还是改）
const type = ref("");

// 删除行
const deleteAccessoryNumberDocumentFunc = async (row) => {
    const res = await deleteAccessoryNumberDocument({ ID: row.ID });
    if (res.code === 0) {
        ElMessage({
            type: "success",
            message: "删除成功",
        });
        if (tableData.value.length === 1 && pages.value.page > 1) {
            pages.value.page--;
        }
        getTableData();
    }
};

// 打开 新增、修改
const openCreateAndEdit = () => {
    type.value = "create";
    router.push({
        path: "/layout/confAccessoryNumberDocumentAdd",
    });
};

// 打开详情
const getDetails = async (row, action) => {
    router.push({
        path: "/layout/confAccessoryNumberDocumentAdd",
        query: {
            ID: row.ID,
        },
    });
};

// 创建款式
const createStyle = (item) => {
    createStyleDialogShow.value = true;
    createStyleNum.value = 1;
    currentItem.value = item;
};

function styleNumSearchShowChange(params) {
    styleNumSearchShow.value = true
}

function closeDialog(params) {
    styleNumSearchShow.value = false
}

watch(() => route.path, (newPath, oldPath) => {
//   console.log('路由已变更：', `从 ${oldPath} 到 ${newPath}`);
    if(newPath == '/layout/accessoryNumberDocument'){
        getTableData();
    }
},{immediate:true});


</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
</style>
